﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>chart demo</title>
    <link href="../css/qs_ui.css"  type="text/css" rel="stylesheet"/>
	<link href="../css/qs_chart.css"  type="text/css" rel="stylesheet"/>
	<link href="../css/quote2_jacky.css"  type="text/css" rel="stylesheet"/>
    <style>
    body {font-size:11px;font-family:tahoma;
    }
    input {font-size:11px;}
    .inputTxt { 
	width:50px;
	border:1px solid #ccc;
                color:#333333;
                display:inline;
                font-size:93%;
				margin-right:5px;
                padding:2px 0 2px 2px;
                }
    .btn {  background-color:#EBEBEB;
            border:1px solid #ccc;
                color:#333333;
                display:inline;
                margin:4px 5px 0 -1px;
                padding:2px 4px;
                text-decoration:none;
				margin-right:5px;
                width:auto;
    
    }
    .ctrtable td {
    border-right: 1px solid #999999;
     border-bottom: 1px solid #999999;
     padding:2px 10px;
    }
	ul li{
		padding-left:5px;
		height:30px;
	}
	.ullihover{
		background-color:#EBEBEB;
	}
	.title{
		background-color:#ccc;
		font-weight:bold;
		padding:3px;
		padding-left:8px;
		margin-left:-15px;
		margin-top:12px;
		margin-bottom:2px;
		clear:both;
		
	}
	.title0{
		margin-top:0px;
	}
	.handle{
		padding-left:15px;
		line-height:20px;
	}
	.args{
		margin-left:20px;
	}
	.args .args-name{
		text-decoration:underline;
		width:50px;
		float:left;
	}
	.args .args-desc{
		float:left;
	}
	select{
		border:1px solid #ccc;
	}
	.li-title{
		height:16px;
		font-weight:bold;
		background-color:#ccc;
		padding:4px;
	}
	.span-title{
		font-weight:bold;
		width:130px;
		display:-moz-inline-box;
		display:inline-block;
		margin-left:10px;
		color:#515151;
	}
    </style>
    <script> var isDebug = false</script>

    <script src="../lib/jquery.js" type="text/javascript"></script>
    <script src="../lib/jquery.json.min.js" type="text/javascript"></script>
    <script src="../lib/migratory-jslib.js" type="text/javascript"></script>
	<script src="../js/sys/DFmt.us.js" type="text/javascript"></script>
    <!--[if IE]><script type="text/javascript" src="../lib/excanvas.min.js"></script><![endif]-->

	<!-- <script src="../js/sys/mstar.common.js" type="text/javascript"></script>
    <script src="../js/sys/DFmt.us.js" type="text/javascript"></script>
    <script src="../qschart/mstar_qs_chart_1.1.js" type="text/javascript"></script>-->
	
	<script src="../js/cookie.js" type="text/javascript"></script>
	<script src="../lib/mstar.flot.js" type="text/javascript"></script>
	<script src="../js/com/chartDraw.js" type="text/javascript"></script>
	<script src="../js/ui/util.js" type="text/javascript"></script>
	<script src="../js/com/autoCompleteBox.js" type="text/javascript"></script>
	<script src="../js/com/chartUtil.js" type="text/javascript"></script>
	<script src="../js/com/indicatorCalculation.js" type="text/javascript"></script>
	<script src="../js/com/chartDataManager.js" type="text/javascript"></script>
	<script src="../js/com/stockChart.js" type="text/javascript"></script>
    <script>
        var reloginUrl = "../demologin.jsp?r=chartCtrlApiDemo.htm";    // when session expired or can't login redirect this page.
        //var intradayUrl  = "http://rtqdev.morningstar.com/opt/quote.jsp?"; // get intrayData Url.
        if (Cookies.get("SessionID") == null) {
        window.location.href = reloginUrl;
        }
    </script>

</head>
<body style="overflow: auto; padding: 0; margin: 0">
    <div style="margin-bottom:10px;overflow:auto">
    	<div id="chart" style="position: relative;height:330px;float:left;">
    </div>
	<div id="init" style="position: relative;height:286px;float:left;background-color:#f5f5f5;border:1px solid #bbbbbb;margin-left:10px;">
<pre>
-------------chart initial code-----------------
var culture = "en-US",region = "USA",mainTicker = "XNYS:IBM";
var sw = 955, sh =356,statusConfig = { width: 760, height: 320 };
var uiconfig = {pCtrl1:null,pCtrl2:null,vCtrl:null,
                Chart:{showPChart:true,showVChart:true,
		showLegend:true,showTimeSlider:true},
                RightMenu:false,
                CustomUI:false,
                chartCtrl:"default",
                settingPanel:null,
		fairValue:true,autoHeight:true
                };
var gbcm = GB_ChartDataManager;
gbcm.dataUrls.intraday =   "../quote.jsp?";;
gbcm.dataUrls.historical =  "../getStockHistoricalData.jsp?";
gbcm.dataUrls.fundamental =  "../getFundamentalData.jsp?";
var ch1 = new RTChartComponent(mainTicker, region, culture );
ch1.setLoginUrl(reloginUrl);
ch1.initUIConfig(uiconfig);  // user default ui configure.
ch1.Init("chart","ch1",statusConfig);	
</pre>
    </div>
    </div>
<div style="width:59%;height:490px;background-color:#f5f5f5;border:1px solid #bbbbbb;float:left;margin-left:0.5%;overflow:auto;">
	<ul class="ctrl">
		<li class='li-title'>Display</li>
		<li idx='1'><span class='span-title'>Chart Type:</span>
					<select id="chartType">
						<option value='lines'>Line</option>
						<option value='ohlc'>OHLC</option>
						<option value='candle'>Candlestick</option>
						<option value='growth'>% Growth</option>
						<option value='growth10'>10k Growth</option>
						<option value='dEffect'>Divdend Effect</option>
					</select>
                    <input type="button" value="Set Chart Type" onclick="setChartType()" class="btn"/>
                </li>
		<li idx='2'><span class='span-title'>Vertical Scale</span><select id="chartScale">
						<option value=='0'>liner</option>
						<option value='1'>logarithmic</option>
					</select>
                    <input type="button" value="Set Chart Type" onclick="setVerticalScale()" class="btn"/></li>
		<li idx='3'><span class='span-title'>Compair Tickers:</span><input type="text" id="compairTxt" class="inputTxt"/>
                    <input type="button" value="Add" onclick="addCompairTicker()" class="btn"/>
					<input id="select-compair" type="text"class="inputTxt"/>
					<input type="button" value="Remove Compair Ticker" onclick="removeCompairTicker()" class="btn"/>
					</li>
		<li idx='4'><span class='span-title'>Cursor Type:</span><input type="text" id="csType" class="inputTxt"/>
                    <input type="button" value="Set Cursor Type" onclick="setCursorType()" class="btn"/></li>
		<li idx='5'><span class='span-title'>Zoom:</span><select id="zoomType" onchange="changeZoomType()">
                        <option value="-1">select a zoom type</option>
                        <option value="1">1 Day</option>
                        <option value="2">5 Days</option>
                        <option value="3">1 Month</option>
                        <option value="4">3 Months</option>
                        <option value="5">YTD</option>
                        <option value="6">1 Year</option>
                        <option value="7">3 Years</option>
                        <option value="8">5 Years</option>
                        <option value="9">10 Years</option>
                        <option value="10">Maximum</option>
                    </select>&nbsp;</li>
		<li idx='6'><span class='span-title'>Customize Range:</span><input type="text" id="startBox" class="inputTxt"/>--<input type="text" id="endBox" class="inputTxt"/>
                    <input type="button" value="Customize Range of Date " onclick="changeDateRange()" class="btn"/></li>
		
		<li idx='7'><span class='span-title'>Frequency:</span><input type="text" id="fre" class="inputTxt"/>
                    <input type="button" value="Set Frequency" onclick="setFrequency()" class="btn"/>(d,w,m)</li>
		<li idx='8'><span class='span-title'>Switch Volume Chart:</span>  <input type="text" id="switchVol" class="inputTxt"/>
                    <input type="button" value="Switch Volume Chart" onclick="switchVolumeChart()" class="btn"/>
                </li>
		<li idx='9'><span class='span-title'>Switch Earnings:</span><input type="text" id="earnings" class="inputTxt"/>
                    <input type="button" value="Switch Earnings" onclick="switchEarnings()" class="btn"/>
                </li>
		<li idx='10'><span class='span-title'>Switch Dividend:</span><input type="text" id="dividend" class="inputTxt"/>
                    <input type="button" value="Switch Dividend" onclick="switchDividend()" class="btn"/>
                </li>
		<li idx='11'><span class='span-title'>Switch Splits:</span><input type="text" id="splits" class="inputTxt"/>
                    <input type="button" value="Switch Splits" onclick="switchSplits()" class="btn"/>
               </li>
		<li class='li-title'>Drawing and note</li>
		<li idx='39'><span class='span-title'>Trend line</span>
		<input type="button" value="Add a trend line" onclick="javascript:ch1.beginDrawing('trendline')" class="btn"/>
		</li>
		<li idx='40'><span class='span-title'>Rectangle</span>
		<input type="button" value="Add a Rectangle" onclick="javascript:ch1.beginDrawing('rectangle')" class="btn"/></li>
		<li idx='41'><span class='span-title'>Ellipse</span>
		<input type="button" value="Add a Ellipse" onclick="javascript:ch1.beginDrawing('ellipse')" class="btn"/></li>
		<li idx='42'><span class='span-title'>Note</span>
		<input type="button" value="Add a Note" onclick="javascript:ch1.beginDrawing('note')" class="btn"/></li>
		<li class='li-title'>Indicators</li>
		<li idx='12'><span class='span-title'>SMA</span>Period of line1:<input type="text" id="sma1" class="inputTxt"/>
                    line2:<input type="text" id="sma2" class="inputTxt"/>
                    line3:<input type="text" id="sma3" class="inputTxt"/>

                    <input type="button" value="Add SMA" onclick="javascript:ch1.addIndicators.apply(this,['SMA',document.getElementById('sma1').value,document.getElementById('sma2').value,document.getElementById('sma3').value]);" class="btn" />
					SMA:<input type="text" id="rsma1" class="inputTxt"/>
                    <input type="button" value="Remove SMA" onclick="javascript:ch1.removeIndicators.apply(this,['SMA'],document.getElementById('rsma1').value);" class="btn"/></li>
		<li idx='13'><span class='span-title'>Volume SMA</span>Period:<input type="text" id="smaV" class="inputTxt"/>
                    <input type="button" value="add Volume SMA" onclick="javascript:ch1.addIndicators.apply(this,['SMAV',document.getElementById('smaV').value]);" class="btn"/><input type="button" value="remove Volume SMA" onclick="javascript:ch1.removeIndicators.apply(this,['SMAV']);" class="btn"/></li>
		<li idx='14'><span class='span-title'>EMA</span>Period of line1:<input type="text" id="ema1" class="inputTxt"/>
                    line2:<input type="text" id="ema2" class="inputTxt"/>
                    line3:<input type="text" id="ema3" class="inputTxt"/>
                    <input type="button" value="add EMA" onclick="javascript:ch1.addIndicators.apply(this,['EMA',document.getElementById('ema1').value,document.getElementById('ema2').value,document.getElementById('ema3').value]);" class="btn"/>Period of EMA:<input type="text" id="rema1" class="inputTxt"/>       
                    <input type="button" value="remove" onclick="javascript:ch1.removeIndicators.apply(this,['EMA',document.getElementById('rema1').value]);" class="btn"/></li>
		
		
		<li idx='15'><span class='span-title'>BBands</span>Preiod:<input type="text" id="bbandsP" class="inputTxt"/>
                    Deviation:<input type="text" id="bbandsD" class="inputTxt"/>
                    <input type="button" value="add BBands" onclick="javascript:ch1.addIndicators.apply(this,['BBands',document.getElementById('bbandsD').value]" class="btn"/> <input type="button" value="remove BBands" onclick="javascript:ch1.removeIndicators.apply(this,['BBands']);" class="btn"/></li>
		<li idx='16'><span class='span-title'>PSAR</span>step:<input type="text" id="psarStep" class="inputTxt"/>
                    max of steps:<input type="text" id="psarMStep" class="inputTxt" />
                    <input type="button" value="add PSAR" onclick="javascript:ch1.addIndicators.apply(this,['PSAR',document.getElementById('psarStep').value,document.getElementById('psarMStep').value]);" class="btn"/>
                </td>
                <td>
                    <input type="button" value="remove PSAR" onclick="javascript:ch1.removeIndicators.apply(this,['PSAR']);" class="btn"/></li>
		<li idx='17'><span class='span-title'>MACD</span>Slow Preiod:<input type="text" id="macdP1" class="inputTxt"/>
                    fast Preiod:<input type="text" id="macdP2" class="inputTxt"/>
                    signal Preiod:<input type="text" id="macdP3" class="inputTxt"/>
                    <input type="button" value="add MACD" onclick="javascript:ch1.addIndicators.apply(this,['MACD',document.getElementById('macdP1').value,document.getElementById('macdP2').value,document.getElementById('macdP3').value]);" class="btn"/><input type="button" value="remove MACD" onclick="javascript:ch1.removeIndicators.apply(this,['MACD']);" class="btn"/></li>
		<li idx='18'><span class='span-title'>ROC</span>Preiod:<input type="text" id="rocP" class="inputTxt"/>
                    <input type="button" value="add ROC" onclick="javascript:ch1.addIndicators.apply(this,['ROC',document.getElementById('rocP').value]);" class="btn"/><input type="button" value="remove ROC" onclick="javascript:ch1.removeIndicators.apply(this,['ROC']);" class="btn"/></li>
		<li idx='19'><span class='span-title'>RSI</span> Preiod:<input type="text" id="rsiP" class="inputTxt"/>
                    <input type="button" value="add RSI" onclick="javascript:ch1.addIndicators.apply(this,['RSI',document.getElementById('rsiP').value]);" class="btn"/><input type="button" value="remove RSI" onclick="javascript:ch1.removeIndicators.apply(this,['RSI']);" class="btn"/></li>
		<li idx='20'><span class='span-title'>Williams</span>Preiod:<input type="text" id="willRP" class="inputTxt"/>
                    <input type="button" value="add Williams" onclick="javascript:ch1.addIndicators.apply(this,['WillR',document.getElementById('willRP').value]);" class="btn"/><input type="button" value="remove Williams" onclick="javascript:ch1.removeIndicators.apply(this,['WillR']);" class="btn"/></li>
		<li idx='21'><span class='span-title'>Slow Stochastic</span>D% Preiod:<input type="text" id="sStochasticd" class="inputTxt"/>
                    K% Preiod:<input type="text" id="sStochastick" class="inputTxt"/>
                    <input type="button" value="add Slow Stochastic" onclick="javascript:ch1.addIndicators.apply(this,['SStochastic',document.getElementById('sStochasticd').value,document.getElementById('sStochastick').value]);" class="btn"/> <input type="button" value="remove Slow Stochastic" onclick="javascript:ch1.removeIndicators.apply(this,['SStochastic']);" class="btn"/></li>
		<li idx='22'><span class='span-title'>Fast Stochastic</span>D% Preiod:<input type="text" id="fStochasticd" class="inputTxt"/>
                    K% Preiod:<input type="text" id="fStochastick" class="inputTxt"/>
                    <input type="button" value="add Fast Stochastic" onclick="javascript:ch1.addIndicators.apply(this,['FStochastic',document.getElementById('fStochasticd').value,document.getElementById('fStochastick').value]);" class="btn"/> <input type="button" value="remove Fast Stochastic" onclick="javascript:ch1.removeIndicators.apply(this,['FStochastic']);" class="btn"/></li>
		
		<li idx='42'><span class='span-title'>VPlus</span>
		<input type="button" value="Add VPlus" onclick="javascript:ch1.addIndicators.apply(this,['VPlus']);" class="btn"/>
		<input type="button" value="remove VPlus" onclick="javascript:ch1.removeIndicators.apply(this,['VPlus']);" class="btn"/>
			</li>
		<li idx='43'><span class='span-title'>Volume</span><input type="button" value="Add Volume" onclick="javascript:ch1.addIndicators.apply(this,['Volume']);" class="btn"/>
		<input type="button" value="remove Volume" onclick="javascript:ch1.removeIndicators.apply(this,['Volume']);" class="btn"/>
		</li>
		<li idx='32'><span class='span-title'>VBP</span>
		<input type="button" value="Add VBP" onclick="javascript:ch1.addIndicators.apply(this,['VBP']);" class="btn"/>
		<input type="button" value="remove VBP" onclick="javascript:ch1.removeIndicators.apply(this,['VBP']);" class="btn"/>
		</li>
		<li idx='31'><span class='span-title'>UDRatio</span>
		Period:<input type="text" id="udrp" class="inputTxt"/>Smoothing:<input type="text" id="udrs" class="inputTxt"/>
		<input type="button" value="Add UDRatio" onclick="javascript:ch1.addIndicators.apply(this,['UDRatio',document.getElementById('udrp').value,document.getElementById('udrp').value]);" class="btn"/>
		<input type="button" value="remove UDRatio" onclick="javascript:ch1.removeIndicators.apply(this,['UDRatio']);" class="btn"/>
		</li>
		<li idx='30'><span class='span-title'>VAcc</span>
		<input type="button" value="Add VAcc" onclick="javascript:ch1.addIndicators.apply(this,['VAcc']);" class="btn"/>
		<input type="button" value="remove VAcc" onclick="javascript:ch1.removeIndicators.apply(this,['VAcc']);" class="btn"/>
		</li>
		<li idx='29'><span class='span-title'>OBV</span>
		<input type="button" value="Add OBV" onclick="javascript:ch1.addIndicators.apply(this,['OBV']);" class="btn"/>
		<input type="button" value="remove OBV" onclick="javascript:ch1.removeIndicators.apply(this,['OBV']);" class="btn"/>
		</li>
		<li idx='28'><span class='span-title'>MFI</span>
		Period:<input type="text" id="msfp" class="inputTxt"/>
		<input type="button" value="Add MFI" onclick="javascript:ch1.addIndicators.apply(this,['MFI',document.getElementById('msfp').value]);" class="btn"/>
		<input type="button" value="remove MFI" onclick="javascript:ch1.removeIndicators.apply(this,['MFI']);" class="btn"/></li>
		<li idx='27'><span class='span-title'>DMI</span>
		<input type="button" value="Add DMI" onclick="javascript:ch1.addIndicators.apply(this,['DMI']);" class="btn"/>
		<input type="button" value="remove DMI" onclick="javascript:ch1.removeIndicators.apply(this,['DMI']);" class="btn"/>
		</li>
		<li idx='26'><span class='span-title'>ULT</span>
		<input type="button" value="Add ULT" onclick="javascript:ch1.addIndicators.apply(this,['ULT']);" class="btn"/>
		<input type="button" value="remove ULT" onclick="javascript:ch1.removeIndicators.apply(this,['ULT']);" class="btn"/>
		</li>
		<li idx='25'><span class='span-title'>Momentum</span>
		Period:<input type="text" id="momp" class="inputTxt"/>
		<input type="button" value="Add Momentum" onclick="javascript:ch1.addIndicators.apply(this,['Momentum',document.getElementById('momp').value]);" class="btn"/>
		<input type="button" value="remove Momentum" onclick="javascript:ch1.removeIndicators.apply(this,['Momentum']);" class="btn"/></li>
		</li>
		<li idx='24'><span class='span-title'>MAE</span>
		Period:<input type="text" id="maep" class="inputTxt"/>Band Width:<input type="text" id="maebw" class="inputTxt"/>
		<input type="button" value="Add MAE" onclick="javascript:ch1.addIndicators.apply(this,['MAE',document.getElementById('maep').value,document.getElementById('maebw').value]);" class="btn"/>
		<input type="button" value="remove MAE" onclick="javascript:ch1.removeIndicators.apply(this,['MAE']);" class="btn"/></li>
		</li>
		<li idx='23'><span class='span-title'>PChannel</span>
		Period:<input type="text" id="pchp" class="inputTxt"/>
		<input type="button" value="Add PChannel" onclick="javascript:ch1.addIndicators.apply(this,['PChannel',document.getElementById('pchp').value]);" class="btn"/>
		<input type="button" value="remove PChannel" onclick="javascript:ch1.removeIndicators.apply(this,['PChannel']);" class="btn"/></li>
		</li>
		<li class='li-title'>Fundamental</li>
		<li idx='33'><span class='span-title'>PE</span>
		<input type="button" value="Add PE" onclick="javascript:ch1.addValuations.apply(this,['PE']);" class="btn"/>
		<input type="button" value="remove PE" onclick="javascript:ch1.removeValuations.apply(this,['PE']);" class="btn"/>
		</li>
		<li idx='35'><span class='span-title'>PS</span>
		<input type="button" value="Add PS" onclick="javascript:ch1.addValuations.apply(this,['PS']);" class="btn"/>
		<input type="button" value="remove PS" onclick="javascript:ch1.removeValuations.apply(this,['PS']);" class="btn"/>
		
		</li>
		<li idx='34'><span class='span-title'>PB</span>
		<input type="button" value="Add PB" onclick="javascript:ch1.addValuations.apply(this,['PB']);" class="btn"/>
		<input type="button" value="remove PB" onclick="javascript:ch1.removeValuations.apply(this,['PB']);" class="btn"/>
		</li>
		<li idx='36'><span class='span-title'>PC</span>
		<input type="button" value="Add PC" onclick="javascript:ch1.addValuations.apply(this,['PC']);" class="btn"/>
		<input type="button" value="remove PC" onclick="javascript:ch1.removeValuations.apply(this,['PC']);" class="btn"/>
		</li>
		<li idx='37'><span class='span-title'>FairValue</span>
		<input type="button" value="Add FairValue" onclick="javascript:ch1.addValuations.apply(this,['FairValue']);" class="btn"/>
		<input type="button" value="remove FairValue" onclick="javascript:ch1.removeValuations.apply(this,['FairValue']);" class="btn"/>
		</li>
		<li idx='44'><span class='span-title'>RDividend</span>
		<input type="button" value="Add RDividend" onclick="javascript:ch1.addValuations.apply(this,['RDividend']);" class="btn"/>
		<input type="button" value="remove RDividend" onclick="javascript:ch1.removeValuations.apply(this,['RDividend']);" class="btn"/>
		</li>
		<li idx='45'><span class='span-title'>DYield</span>
		<input type="button" value="Add DYield" onclick="javascript:ch1.addValuations.apply(this,['DYield']);" class="btn"/>
		<input type="button" value="remove DYield" onclick="javascript:ch1.removeValuations.apply(this,['DYield']);" class="btn"/>
		</li>
		<li idx='46'><span class='span-title'>REPS</span>
		<input type="button" value="Add REPS" onclick="javascript:ch1.addValuations.apply(this,['REPS']);" class="btn"/>
		<input type="button" value="remove REPS" onclick="javascript:ch1.removeValuations.apply(this,['REPS']);" class="btn"/>
		</li>
		<li idx='47'><span class='span-title'>SInterest</span>
		<input type="button" value="Add SInterest" onclick="javascript:ch1.addValuations.apply(this,['SInterest']);" class="btn"/>
		<input type="button" value="remove SInterest" onclick="javascript:ch1.removeValuations.apply(this,['SInterest']);" class="btn"/>
		</li>
		<li idx=''><span class='span-title'></span></li>
				
	</ul>
</div>
<div id="desc" style="width:39%;height:490px;background-color:#f5f5f5;border:1px solid #bbbbbb;float:left;margin-left:0.5%;">
	
</div>
    <script>
var debug = true;  /// it will get data api in dev server.
var culture = "en-US";
var region = "USA";
var mainTicker = "XNYS:IBM";
var sw = 955, sh =356;
var statusConfig = { width: 760, height: 320 };
var uiconfig = {pCtrl1:null,
                pCtrl2:null,
                vCtrl:null,
                Chart:{showPChart:true,showVChart:true,showLegend:true,showTimeSlider:true},
                RightMenu:false,
                CustomUI:false,
                chartCtrl:"default",
                settingPanel:null,
				fairValue:true,
                autoHeight:true
                };
GB_ChartDataManager.dataUrls.intraday =   "../quote.jsp?";;
GB_ChartDataManager.dataUrls.historical =  "../getStockHistoricalData.jsp?";
GB_ChartDataManager.dataUrls.fundamental =  "../getFundamentalData.jsp?";
var ch1 = new RTChartComponent(mainTicker, region, culture );
ch1.setLoginUrl(reloginUrl);
ch1.initUIConfig(uiconfig);              // user default ui configure.
ch1.Init("chart","ch1",statusConfig)
//"1":{desc:"",meth:"",args:[{name:"",desc:""}],eg:""}
//"1":{desc:"",meth:[{name:"",args:[{name:"",desc:""}]}],eg:""}
var descArr = {
	"1":{desc:"Change the type of chart",meth:[{name:"setChartType (type)",args:[{name:"type",desc:"it is a string type.(lines: line chart, ohlc: OHLC chart, candle: candlestick cahrt)."}]}],eg:"ch1.setChartType ('lines');ch1.setChartType ('ohlc');ch1.setChartType ('candle');"},
	"2":{desc:"Change the type of scale",meth:[{name:"switchScaleType(type)",args:[{name:"type",desc:"it is a integer.(0: Linear ,1: Logarithmic;)"}]}],eg:"ch1.switchScaleType(0)<br/>ch1.switchScaleType(1)"},
	"3":{desc:"Add compare tickers",meth:[{name:"addCompairTickers(tickers)",args:[{name:"tickers",desc:"the unique symbol for a securities. Its format is concat exchange name and ticker name with a colon. (Such as: XNYS: IBM). It can input multi-tickers which spited by comma. (XNAS:MSFT,XNYS:IBM)"}]},{name:"removeCompairTicker (tickers)",args:[{name:"tickers",desc:"the unique symbol for a securities. Its format is concat exchange name and ticker name with a colon. (Such as: XNYS: IBM)."}]}],eg:"ch1.addCompairTickers(XYNS:IBM) <br/> ch1.addCompairTickers(XNAS:MSFT,XNYS:IBM)."},
	"4":{desc:"Change the style of cursor.",meth:[{name:"setCursorType (type)",args:[{name:"type",desc:"it is a integer.(0:Track ball ,1: Crosshair; 3: Off.)"}]}],eg:"ch1.setCursorType (0);"},
	"5":{desc:"Change the zoom type.",meth:[{name:"changeRange(type)",args:[{name:"type",desc:"it is a integer.(1: one day;2: five days,3: one month, 4: three months,5:YTD,6: one year, 7:three years, 8:five years, 9: ten years. 10: maximum."}]}],eg:"ch1.changeRange(1)<br/>ch1.changeRange(2);"},
	"6":{desc:"Customize range of date.",meth:[{name:"changeDatePeriod (st,ed)",args:[{name:"st",desc:"the start date .(its format is yyyy-MM-dd or yyyy-M-d )"},{name:"et",desc:"the end date .(its format is yyyy-MM-dd or yyyy-M-d )"}]}],eg:"ch1.changeDatePeriod('2004-1-3','2009-11-9')."},
	"7":{desc:"Change the type of data frequency.",meth:[{name:"setFrequency (type)",args:[{name:"type",desc:" it is a string type.(d: daily, w: weekly, m: monthly)."}]}],eg:"ch1.setFrequency('d');<br/>ch1.setFrequency('w');<br/>ch1.setFrequency('m');"},
	"8":{desc:"Switch the visibility of volume chart.",meth:[{name:"switchVolumeChart (isShow)",args:[{name:"isShow",desc:"it is a integer.(1: show volume chart, 0: hide volume chart)."}]}],eg:"ch1.switchVolumeChart (0);<br/>ch1.switchVolumeChart (1);"},
	"9":{desc:"Switch the visibility of earning's icon in price chart.",meth:[{name:"switchEvents ('earnings',isShow)",args:[{name:"isShow",desc:"it is a integer.(1: show earnings, 0: hide earnings).."}]}],eg:"ch1.switchEvents ('earnings',0);"},
	"10":{desc:"Switch the visibility of dividend's icon in price chart.",meth:[{name:"switchEvents ('dividend',isShow)",args:[{name:"isShow",desc:"it is a integer.(1: show dividend, 0: hide dividend).."}]}],eg:"ch1.switchEvents ('dividend',0);"},
	"11":{desc:"Switch the visibility of splits' icon in price chart.",meth:[{name:"switchEvents ('splits',isShow)",args:[{name:"isShow",desc:"it is a integer.(1: show splits, 0: hide splits).."}]}],eg:"ch1.switchEvents ('splits',0);"},
	"12":{desc:"Add price simple move average <br/>Remove price simple move average indicator",meth:[{name:"addIndicators ('SMA',Line1,Line2,Line3)",args:[{name:"line1",desc:"the period of first line of SMA lines (int) ."},{name:"line2",desc:"the period of first line of SMA lines (int) ."},{name:"line3",desc:"the period of first line of SMA lines (int) ."}]},{name:"removeIndicators ('SMA',period)",args:[{name:"period",desc:"the period of first line of  SMA lines (option)"}]}],eg:"ch1.removeIndicators('EMA',50);<br/>ch1.removeIndicators('EMA',10);<br/>ch1.removeIndicators('EMA',20);ch1.removeIndicators('EMA',50);<br/>ch1.removeIndicators('EMA',10);<br/>ch1.removeIndicators('EMA',20);<br/>ch1.removeIndicators('EMA'); "},
	"13":{desc:"Add volume simple move average indicator<br/>Remove volume simple move average indicator",meth:[{name:"addIndicators ('SMAV',Period)",args:[{name:"Period",desc:"the period of SMAV line (int). "}]},{name:"removeIndicators ('SMAV')",args:[{name:"",desc:"the period of SMAV line (int). "}]}],eg:"ch1.addIndicators('SMAV',50);<br/>ch1.removeIndicators ('SMAV')"},
	
	"14":{desc:"Add price exponential move average indicator(EMA)<br/>Remove price exponential move average indicator(EMA)",meth:[{name:"addIndicators ('EMA',Line1,Line2,Line3)",args:[{name:"Line1",desc:"the period of first line of  EMA lines (int)."},{name:"Line2",desc:"the period of second  line of  EMA lines (int)."},{name:"Line3",desc:"the period of third line of  EMA lines (int)."}]},{name:"removeIndicators ('EMA',Period)",args:[{name:"Period",desc:"the period of first line of EMA lines (option)"}]}],eg:"ch1.addIndicators('EMA',50,10,20);<br/>ch1.addIndicators('EMA',50,null,20);<br/>ch1.addIndicators('EMA',null,10,null);<br/>ch1.removeIndicators('EMA',50);<br/>ch1.removeIndicators('EMA',10);<br/>ch1.removeIndicators('EMA',20);<br/>ch1.removeIndicators('EMA');  // remove all line of EMA"},
	
	"15":{desc:"Add Bollinger Bands indicator<br/>Remove Bollinger Bands indicator",meth:[{name:"addIndicators ('BBands',Period,Dev)",args:[{name:"Period",desc:"the period of the BBands.(int)"},{name:"Dev",desc:" the deviation of the BBands (int)"}]},{name:"removeIndicators ('BBands')",args:[{name:"",desc:""}]}],eg:"ch1.addIndicators('BBands',14,2);<br/>ch1.removeIndicators('BBands');"},
	
	"16":{desc:"Add Parabolic SAR indicator<br/>Remove Parabolic SAR indicator",meth:[{name:"addIndicators ('PSAR',parameter1, parameter2)",args:[{name:"parameter1",desc:"the step of the PSAR. (float)"},{name:"parameter2",desc:"the max step of the PSAR. (float)"}]},{name:"removeIndicators ('PSAR')",args:[{name:"",desc:""}]}],eg:"ch1.addIndicators('PSAR',0.02,0.1);<br/>ch1.removeIndicators('PSAR');"},
	
	"17":{desc:"Add Rate Of Change  indicator<br/>Remove Rate Of Change  indicator",meth:[{name:"addIndicators ('ROC',Period)",args:[{name:"Period",desc:"the period of ROC (int). "}]},{name:"removeIndicators ('ROC')",args:[{name:"",desc:""}]}],eg:"ch1.addIndicators('ROC',12);<br/>ch1.removeIndicators('ROC');"},
	
	"18":{desc:"Add Relative Strength Index   indicator<br/>Remove Relative Strength Index   indicator",meth:[{name:"addIndicators ('RSI',Period)",args:[{name:"Period",desc:"the period of RSI (int). "}]},{name:"removeIndicators ('RSI')",args:[{name:"",desc:""}]}],eg:"ch1.addIndicators('RSI',14);<br/>ch1.removeIndicators('RSI');"},
	
	"19":{desc:"Add Moving Average Convergence/Divergence   indicator<br/>Remove Moving Average Convergence/Divergence   indicator",meth:[{name:"addIndicators ('MACD', parameter1, parameter2, parameter3)",args:[{name:"parameter1",desc:"the slow period of the MACD (int)."},{name:"parameter2",desc:"the fast period of the MACD (int)."},{name:"parameter3",desc:"the signal period of the MACD (int)."}]},{name:"removeIndicators ('MACD')",args:[{name:"",desc:""}]}],eg:"ch1.addIndicators('MACD',26,12,9);<br/>ch1.removeIndicators('MACD');"},
	"20":{desc:"Add Williams %R  indicator<br/>Remove Williams %R  indicator",meth:[{name:"addIndicators ('WillR',Period)",args:[{name:"period",desc:" the period of WillR (int). "}]},{name:"removeIndicators ('WillR')",args:[{name:"",desc:""}]}],eg:"ch1.addIndicators('WillR',20);<br/>ch1.removeIndicators('WillR');"},
	"21":{desc:"Add Slow Stochastic indicator<br/>Remove Slow Stochastic indicator",meth:[{name:"addIndicators ('SStochastic', paramter1, paramter2)",args:[{name:"paramter1",desc:"the K% period of the SStochastic.(int)"},{name:"paramter2",desc:"the D% period of the SStochastic.(int)"}]},{name:"removeIndicators ('SStochastic')",args:[{name:"",desc:""}]}],eg:"ch1.addIndicators('SStochastic',15,5);<br/>ch1.removeIndicators('SStochastic');"},
	"22":{desc:"Add Fast Stochastic indicator<br/>Remove Fast Stochastic indicator",meth:[{name:"addIndicators ('FStochastic', paramter1, paramter2)",args:[{name:"paramter1",desc:"the K% period of the FStochastic.(int)"},{name:"paramter2",desc:"the D% period of the FStochastic.(int)"}]},{name:"removeIndicators ('FStochastic')",args:[{name:"",desc:""}]}],eg:"ch1.addIndicators('FStochastic',5,3);<br/>ch1.removeIndicators('FStochastic');"},
   
    "23":{desc:"Add Price Channel indicator<br/>Remove Price Channel indicator",meth:[{name:"addIndicators ('PChannel',Period)",args:[{name:"Period",desc:" the period of PChannel (int)."}]},{name:"removeIndicators ('PChannel')",args:[{name:"",desc:""}]}],eg:"ch1.addIndicators('PChannel',14);<br/>ch1.removeIndicators('PChannel ');"},
	"24":{desc:"Add MA Envelope indicator<br/>Remove MA Envelope indicator",meth:[{name:"addIndicators ('MAE',Period,BandWidth)",args:[{name:"Period",desc:"the period of MAE (int)."},{name:"BandWidth",desc:"the width of band(int)"}]},{name:"removeIndicators ('MAE')",args:[{name:"",desc:""}]}],eg:"ch1.addIndicators('MAE',14,2);<br/>ch1.removeIndicators('MAE ');"},
	"25":{desc:"Add Momentum indicator<br/>Remove Momentum indicator",meth:[{name:"addIndicators ('Momentum',Period)",args:[{name:"Period",desc:"the period of momentum (int)."}]},{name:"removeIndicators ('Momentum')",args:[{name:"",desc:""}]}],eg:"ch1.the period of momentum (int).<br/>ch1.removeIndicators('Momentum ');"},
	"26":{desc:"Add Ultimate (ULT) Oscillator indicator <br/>Remove Ultimate (ULT) Oscillator indicator ",meth:[{name:"addIndicators ('ULT')",args:[{name:"",desc:""}]},{name:"removeIndicators ('ULT')",args:[{name:"",desc:""}]}],eg:"ch1.addIndicators('ULT');<br/>ch1.removeIndicators ('ULT');"},
	
	"27":{desc:"Add Directional Moving Index (DMI) indicator <br/>Remove Directional Moving Index (DMI) indicator ",meth:[{name:"addIndicators ('DMI')",args:[{name:"",desc:""}]},{name:"removeIndicators ('DMI')",args:[{name:"",desc:""}]}],eg:"ch1.addIndicators ('DMI');<br/>ch1.removeIndicators ('DMI');"},
	"28":{desc:"Add Money Flow Index  indicator <br/>Remove Money Flow Index indicator ",meth:[{name:"addIndicators ('MFI',Period)",args:[{name:"period",desc:"the period of MFI (int)."}]},{name:"removeIndicators ('MFI')",args:[{name:"",desc:""}]}],eg:"ch1.addIndicators ('MFI',14);<br/>ch1.removeIndicators ('MFI');"},
	"29":{desc:"Add On Balance Volume indicator <br/>Remove On Balance Volume indicator ",meth:[{name:"addIndicators ('OBV')",args:[{name:"",desc:""}]},{name:"removeIndicators ('OBV')",args:[{name:"",desc:""}]}],eg:"ch1.addIndicators ('OBV');<br/>ch1.removeIndicators ('OBV');"},
	"30":{desc:"Add Volume Accumulation   indicator<br/>Remove Volume Accumulation indicator ",meth:[{name:"addIndicators ('VAcc')",args:[{name:"",desc:""}]},{name:"removeIndicators ('VAcc')",args:[{name:"",desc:""}]}],eg:"ch1.addIndicators ('VAcc');<br/>ch1.removeIndicators ('VAcc');"},
	"31":{desc:"Add Up/Down Ratio indicator <br/>Remove Up/Down Ratio indicator ",meth:[{name:"addIndicators ('UDRatio',Period,Soomthing)",args:[{name:"Period",desc:"the period of UDRatio (int)."},{name:"Soomthing",desc:"the smoothing of UDRatio (int)"}]},{name:"removeIndicators ('UDRatio')",args:[{name:"",desc:""}]}],eg:"ch1.addIndicators ('UDRatio',7,5);<br/>ch1.removeIndicators ('UDRatio');"},
	"32":{desc:"Add Volume By Price   indicator <br/>Remove Volume By Price   indicator ",meth:[{name:"addIndicators ('VBP')",args:[{name:"",desc:""}]},{name:"removeIndicators ('VBP')",args:[{name:"",desc:""}]}],eg:"ch1.addIndicators ('VBP');<br/>ch1.removeIndicators ('VBP');"},
	"33":{desc:"Add Price/Earnings valuations chart.<br/>Remove Price/Earnings valuations chart.",meth:[{name:"addValuations('PE')",args:[{name:"",desc:""}]},{name:"removeIndicators ('PE')",args:[{name:"",desc:""}]}],eg:"ch1.addValuations('PE')<br/>ch1.removeValuations ('PE')"},
	"34":{desc:"Add Price/Books valuations chart.<br/>Remove Price/Books valuations chart.",meth:[{name:"addValuations('PB')",args:[{name:"",desc:""}]},{name:"removeIndicators ('PB')",args:[{name:"",desc:""}]}],eg:"ch1.addValuations('PB')<br/>ch1.removeValuations ('PB')"},
	"35":{desc:"Add Price/Sales valuations chart.<br/>Remove Price/Sales valuations chart.",meth:[{name:"addValuations('PS')",args:[{name:"",desc:""}]},{name:"removeIndicators ('PS')",args:[{name:"",desc:""}]}],eg:"ch1.addValuations('PS')<br/>ch1.removeValuations ('PS')"},
	"36":{desc:"Add Price/Cash Flow valuations chart.<br/>Remove Price/Cash Flow valuations chart.",meth:[{name:"addValuations('PC')",args:[{name:"",desc:""}]},{name:"removeIndicators ('PC')",args:[{name:"",desc:""}]}],eg:"ch1.addValuations('PC')<br/>ch1.removeValuations ('PC')"},
	"37":{desc:"Add Fair Value valuations chart.<br/>Remove Fair Value Flow valuations chart.",meth:[{name:"addValuations('FairValue')",args:[{name:"",desc:""}]},{name:"removeIndicators ('FairValue')",args:[{name:"",desc:""}]}],eg:"ch1.addValuations('FairValue')<br/>ch1.removeValuations ('FairValue')"},
	"38":{desc:"Add a trend line",meth:[{name:"beginDrawing(type)",args:[{name:"type",desc:"the type of drawing"}]}],eg:"ch1.beginDrawing('trendline')"},
	"39":{desc:"Add a rectangle",meth:[{name:"beginDrawing(type)",args:[{name:"type",desc:"the type of drawing"}]}],eg:"ch1.beginDrawing('rectangle')"},
	"40":{desc:"Add a ellipse",meth:[{name:"beginDrawing(type)",args:[{name:"type",desc:"the type of drawing"}]}],eg:"ch1.beginDrawing('ellipse')"},
	"41":{desc:"Add a note",meth:[{name:"beginDrawing(type)",args:[{name:"type",desc:"the type of drawing"}]}],eg:"ch1.beginDrawing('note')"},
	"42":{desc:"Add Volume plus indicator <br/>Remove Volume plus indicator ",meth:[{name:"addIndicators ('VPlus')",args:[{name:"",desc:""}]},{name:"removeIndicators ('VPlus')",args:[{name:"",desc:""}]}],eg:"ch1.addIndicators ('VPlus');<br/>ch1.removeIndicators ('VPlus');"},
	"43":{desc:"Add Volume<br/>Remove Volume",meth:[{name:"addIndicators ('Volume')",args:[{name:"",desc:""}]},{name:"removeIndicators ('Volume')",args:[{name:"",desc:""}]}],eg:"ch1.addIndicators ('Volume');<br/>ch1.removeIndicators ('Volume');"},
	"44":{desc:"Add RDividend valuations chart.<br/>Remove  valuations chart.",meth:[{name:"addValuations('RDividend')",args:[{name:"",desc:""}]},{name:"removeIndicators ('RDividend')",args:[{name:"",desc:""}]}],eg:"ch1.addValuations('RDividend')<br/>ch1.removeValuations ('RDividend')"},
	"45":{desc:"Add DYield valuations chart.<br/>Remove  valuations chart.",meth:[{name:"addValuations('DYield')",args:[{name:"",desc:""}]},{name:"removeIndicators ('DYield')",args:[{name:"",desc:""}]}],eg:"ch1.addValuations('DYield')<br/>ch1.removeValuations ('DYield')"},
	"46":{desc:"Add REPS valuations chart.<br/>Remove  valuations chart.",meth:[{name:"addValuations('REPS')",args:[{name:"",desc:""}]},{name:"removeIndicators ('REPS')",args:[{name:"",desc:""}]}],eg:"ch1.addValuations('REPS')<br/>ch1.removeValuations ('REPS')"},
	"47":{desc:"Add SInterest valuations chart.<br/>Remove SInterest valuations chart.",meth:[{name:"addValuations('SInterest')",args:[{name:"",desc:""}]},{name:"removeIndicators ('SInterest')",args:[{name:"",desc:""}]}],eg:"ch1.addValuations('SInterest')<br/>ch1.removeValuations ('SInterest')"}
	
}
//"1":{desc:"",meth:[{name:"",args:[{name:"",desc:""}]}],eg:""}
	window.onload = function(){
		var s1 = "",s2="",temp=null;
		for (var s in descArr) {
			temp  = descArr[s];
			s2="";
			for(var j = 0;j<temp.meth.length;j++){
				s2 +=temp.meth[j].name;
				for(var i = 0;i<temp.meth[j].args.length;i++){
					if(temp.meth[j].args[i].name==null||temp.meth[j].args[i].name==""){
						s2 +="<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Not need more parameter.";
						continue;
					}
					s2 +="<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u>"+temp.meth[j].args[i].name+"</u>: "+temp.meth[j].args[i].desc;
				}
				if(j<temp.meth.length-1){
						s2 +="<br/>";
				}
			}
			s1 += "<div id='d-"+s+"' class='handle'><div class='title title0'>Description</div>" + descArr[s].desc + "<div  class='title'>Methods</div>"  + s2+ "<div  class='title'>Example</div>" + descArr[s].eg + "</div>";
		}
		$("#desc").append(s1);
		$(".handle").hide();
		$("ul.ctrl li").not(".li-title").hover(
			function(){
				//$(this).addClass("ullihover");
			},
			function(){
				//$(this).removeClass("ullihover");
			}
		).click(function(){
			$(".handle").hide();
			$("ul.ctrl li").removeClass("ullihover");
			$(this).addClass("ullihover");
			$("#d-"+$(this).attr("idx")).show();
		});
		
	}
function addCompairTicker(){
    if(ch1 != null) {
        var ticker = document.getElementById("compairTxt").value;
        if(ticker != "") {
            ch1.addCompairTickers(ticker);
        }
    }
}
function removeCompairTicker(){
    if(ch1 != null) {
        var ticker = document.getElementById("select-compair").value;
        if(ticker != "") {
            ch1.removeCompairTicker(ticker);
        }
    }
}
function changeZoomType() {
    if(ch1 != null) {
        var num = document.getElementById("zoomType").options[document.getElementById("zoomType").selectedIndex].value;
        if(num != "-1") {
            ch1.changeRange(num);
        }
    }
}
function changeDateRange() {
    if(ch1 != null) {
        var st = document.getElementById("startBox").value;
        var ed = document.getElementById("endBox").value;
        if(st != "" && ed != "") {
            ch1.changeDatePeriod(st,ed);
        }
    }
}
function setCursorType() {
    if(ch1 != null) {
        var st =parseInt(document.getElementById("csType").value);
        if(!isNaN(st)&& st>-1 && st < 4) {
            ch1.setCursorType(st);
        }
    }
}
function setFrequency() {
    if(ch1 != null) {
        var st = document.getElementById("fre").value;
        if(st == "w" || st == "d" || st=="m") {
            ch1.setFrequency(st);
        }
    }
}
function switchVolumeChart(){
    if(ch1 != null) {
        var st =parseInt(document.getElementById("switchVol").value);
        if(!isNaN(st)&& (st == 0 ||st==1)) {
            ch1.switchVolumeChart(st);
        }
    }
}
function setChartType() {
    if(ch1 != null) {
        var st = document.getElementById("chartType").value;
        //if(st == "lines" || st == "ohlc" || st == "candle") {
            ch1.setChartType(st);
       // }
    }
}
function switchDividend(){
    if(ch1 != null) {
        var st = parseInt(document.getElementById("dividend").value);
        if(st == 0 || st == 1) {
            ch1.switchEvents("dividend",st);
        }
    }
}
function switchSplits(){
    if(ch1 != null) {
        var st = parseInt(document.getElementById("splits").value);
        if(st == 0 || st == 1) {
            ch1.switchEvents("splits",st);
        }
    }
}
function switchEarnings(){
	if(ch1 != null) {
        var st = parseInt(document.getElementById("earnings").value);
        if(st == 0 || st == 1) {
            ch1.switchEvents("earnings",st);
        }
    }
}
function setVerticalScale(){
	var ty = document.getElementById("chartScale").value;
	ch1.switchScaleType(ty);
}
</script>

</body>
</html>
